{% extends "base.html" %}

{% block title %}登录{% endblock %}

{% block content %}
<div class="row justify-content-center align-items-center min-vh-100">
    <div class="col-md-8 col-lg-6">
        <div class="card">
            <div class="card-header text-center" style="background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%); color: white;">
                <h4 class="mb-0">用户登录</h4>
            </div>
            <div class="card-body p-5">
                <form method="POST" class="needs-validation" novalidate>
                    <div class="mb-4">
                        <label for="email" class="form-label h6">邮箱</label>
                        <div class="input-group input-group-lg">
                            <span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label for="password" class="form-label h6">密码</label>
                        <div class="input-group input-group-lg">
                            <span class="input-group-text"><i class="bi bi-key-fill"></i></span>
                            <input type="password" class="form-control" id="password" name="password" required
                                   placeholder="请输入密码">
                        </div>
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-lg text-white" 
                                style="background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);">
                            登录
                        </button>
                    </div>
                </form>
                <div class="mt-4 text-center">
                    <p class="mb-2 fs-6">还没有账号？ 
                        <a href="{{ url_for('register') }}" style="color: #43cea2; text-decoration: none;">
                            立即注册
                        </a>
                    </p>
                    <p class="mb-0 fs-6">
                        <a href="{{ url_for('reset_password') }}" style="color: #43cea2; text-decoration: none;">
                            忘记密码？
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<style>
    .form-control:focus {
        border-color: #43cea2;
        box-shadow: 0 0 0 0.2rem rgba(67, 206, 162, 0.25);
    }
    
    .input-group-text {
        background-color: transparent;
        border-right: none;
    }
    
    .form-control {
        border-left: none;
    }
    
    .input-group:focus-within {
        box-shadow: 0 0 0 0.2rem rgba(67, 206, 162, 0.25);
    }
    
    .input-group:focus-within .input-group-text,
    .input-group:focus-within .form-control {
        border-color: #43cea2;
    }
    
    .btn:hover {
        opacity: 0.9;
        transform: translateY(-1px);
        transition: all 0.2s;
    }
</style>
{% endblock %} 